<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>表单验证实验</title>
		<script src="js/jquery.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<link rel="stylesheet" href="css/bootstrap.min.css"/>
		<script type="text/javascript">
			function checkSid(){
				//取得学号
				sidvalue = document.getElementById("studentid").value;
				RegExp = /^[0-9]{9} $/;//正则表达式
				if (!RegExp.test(sidvalue)){
					alert("格式不对！")
					return false;
					}
					else {
						return true;
					}
			}
			
			function checkSname(){
				sname = document.getElementById("sname")
				RegExp = /^[\u4e00-\u9FA5]{2,4}$/;
				if(!RegExp.test(sname)){
					document.getElementById("snametip").innerHTML="姓名不合法！"
					document.getElementById("snametip").style="color:red;font-size:10px"
					return false;
				}
				else{
					document.getElementById("snametip").innerHTML=""
					return true;
				}
			}
			function checkMobile(){
				smobile = document.getElementById("mobile")
				RegExp = /^[0-9]{9} $/;
				if(!RegExp.test(smobile)){
					document.getElementById("mobiletip").innerHTML="手机不合法！"
					document.getElementById("mobiletip").style="color:red;font-size:10px"
					return false;
					}
				else{
					document.getElementById("mobiletip").innerHTML=""
					return true;
					}
			}
			function checkSalary(){
				salary = document.getElementById("salary")
				RegExp = /^[0-9]{9} $/;
				if(!RegExp.test(salary)){
					document.getElementById("salarytip").innerHTML="薪资不合法！"
					document.getElementById("salarytip").style="color:red;font-size:10px"
					return false;
					}
				else{
					document.getElementById("salarytip").innerHTML=""
					return true;
					}
				}
		</script>
	</head>
	<body>
		<div class="center-block" style="width: 50%;">
			学号<input onblur="checkSid()" class="form-control" type="text" id="studentid"/><br>
			姓名<input onblur="checkSname()" class="form-control" type="text" id="sname"/><span id="snametip"></span><br>
			手机<input onblur="checkMobile()" class="form-control" type="text" id="mobile"/><span id="mobiletip"></span><br>
			薪资<input onblur="checkSalary()" class="form-control" type="text" id="salary"/><span id="salarytip"></span><br>
			<button class="btn btn-primary btn-block">添加学生</button>
		</div>
	</body>
</html>
